Notifications এর জন্য Custom Events তৈরি

Custom Events হল কাস্টমাইজড ইভেন্টগুলি যা অ্যাপ্লিকেশন বা ওয়েব পেজে নির্দিষ্ট কার্যকলাপের জন্য তৈরি করা হয়। এগুলি সাধারণত কাস্টম ডেটা, মেসেজ বা অন্যান্য সিগন্যাল ট্রিগার করতে ব্যবহৃত হয়। ওয়েব অ্যাপ্লিকেশন এবং মোবাইল অ্যাপ্লিকেশনগুলিতে Notifications তৈরি করার জন্য কাস্টম ইভেন্টগুলি খুবই উপকারী হতে পারে।

Custom Events এবং Notifications

একটি Notification হলো এমন একটি সিস্টেম যা ব্যবহারকারীকে একটি ইভেন্টের বিষয়ে জানায়, যেমন নতুন মেসেজ আসা, সার্ভার থেকে ডেটা আসা বা অ্যাপ্লিকেশনের কোনো আপডেট। কাস্টম ইভেন্ট ব্যবহার করে এই ধরনের নোটিফিকেশন কার্যকরভাবে তৈরি করা যায়।

Custom Events তৈরি করা

এখানে কাস্টম ইভেন্ট তৈরির জন্য JavaScript বা কোনো ওয়েব ফ্রেমওয়ার্ক ব্যবহার করা যেতে পারে।

JavaScript এর মাধ্যমে Custom Event তৈরি করা:

JavaScript-এ CustomEvent ব্যবহার করে কাস্টম ইভেন্ট তৈরি করা যায়। এই ইভেন্টগুলিকে ওয়েব পেজের অন্য অংশে ট্রিগার করা এবং সেগুলির উপর ভিত্তি করে নোটিফিকেশন তৈরি করা সম্ভব।

কাস্টম ইভেন্ট তৈরি এবং ট্রিগার করার উদাহরণ:

// 1. কাস্টম ইভেন্ট তৈরি করা
const notificationEvent = new CustomEvent("newNotification", {
  detail: {
    message: "New message received!",
    type: "info"
  }
});

// 2. কাস্টম ইভেন্টে লিসেনার যোগ করা
document.addEventListener("newNotification", function(event) {
  const notification = event.detail; // কাস্টম ইভেন্টের তথ্য নেওয়া
  showNotification(notification.message, notification.type);
});

// 3. কাস্টম ইভেন্ট ট্রিগার করা
document.dispatchEvent(notificationEvent);

// 4. Notification দেখানোর জন্য ফাংশন
function showNotification(message, type) {
  alert(`${type.toUpperCase()}: ${message}`);
}

এখানে, newNotification হল কাস্টম ইভেন্টের নাম। যখন এই ইভেন্টটি ট্রিগার করা হবে, তখন এটি একটি নোটিফিকেশন শো করবে। detail প্রপার্টি ব্যবহার করে ইভেন্টের সঙ্গে অতিরিক্ত ডেটা (যেমন, মেসেজ এবং টাইপ) পাঠানো হয়েছে।

Custom Events এবং Notification ব্যবস্থাপনা

আপনি একটি notification system তৈরি করতে পারেন যা বিভিন্ন custom events শোনে এবং সেগুলির উপর ভিত্তি করে নোটিফিকেশন প্রদর্শন করে। উদাহরণস্বরূপ, একটি অ্যাপ্লিকেশনে যেখানে ব্যবহারকারী লগইন করলে বা কোনো নতুন মেসেজ আসলে কাস্টম ইভেন্ট ট্রিগার করা হবে।

Multiple Custom Events Example:

// 1. কাস্টম ইভেন্ট তৈরি
const messageEvent = new CustomEvent("messageReceived", {
  detail: { message: "Hello! You have a new message.", type: "success" }
});

const errorEvent = new CustomEvent("errorOccurred", {
  detail: { message: "Oops! Something went wrong.", type: "error" }
});

// 2. ইভেন্টে লিসেনার যোগ করা
document.addEventListener("messageReceived", function(event) {
  const notification = event.detail;
  showNotification(notification.message, notification.type);
});

document.addEventListener("errorOccurred", function(event) {
  const notification = event.detail;
  showNotification(notification.message, notification.type);
});

// 3. ইভেন্ট ট্রিগার করা
document.dispatchEvent(messageEvent); // messageReceived ইভেন্ট ট্রিগার হবে
document.dispatchEvent(errorEvent);   // errorOccurred ইভেন্ট ট্রিগার হবে

// 4. নোটিফিকেশন দেখানোর ফাংশন
function showNotification(message, type) {
  const notificationDiv = document.createElement("div");
  notificationDiv.classList.add("notification", type);
  notificationDiv.innerText = message;
  document.body.appendChild(notificationDiv);
}

এখানে, messageReceived এবং errorOccurred দুইটি কাস্টম ইভেন্ট তৈরি করা হয়েছে, যা নির্দিষ্ট ধরনের নোটিফিকেশন শো করবে।

React (UI Framework) এ Custom Events ব্যবহার

React-এ Event Handling এবং Custom Events ব্যবহার করতে JavaScript কোডের সঙ্গে React কনভেনশনগুলো মিশিয়ে কাজ করতে হবে।

import React, { useState, useEffect } from "react";

function App() {
  const [notification, setNotification] = useState(null);

  // কাস্টম ইভেন্টে লিসেনার যোগ করা
  useEffect(() => {
    const handleNotification = (event) => {
      setNotification(event.detail);
    };

    document.addEventListener("newNotification", handleNotification);

    // ক্লিনআপ
    return () => {
      document.removeEventListener("newNotification", handleNotification);
    };
  }, []);

  // কাস্টম ইভেন্ট ট্রিগার করা
  const triggerNotification = () => {
    const notificationEvent = new CustomEvent("newNotification", {
      detail: { message: "You have a new message!", type: "info" },
    });
    document.dispatchEvent(notificationEvent);
  };

  return (
    <div>
      <button onClick={triggerNotification}>Show Notification</button>
      {notification && (
        <div className={`notification ${notification.type}`}>
          {notification.message}
        </div>
      )}
    </div>
  );
}

export default App;

এখানে, React-এ কাস্টম ইভেন্ট শোনার জন্য useEffect ব্যবহার করা হয়েছে এবং state এর মাধ্যমে নোটিফিকেশন শো করা হচ্ছে।

সারাংশ

Custom Events ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনে কাস্টম নোটিফিকেশন সিস্টেম তৈরি করতে পারেন। JavaScript, React, বা অন্য কোনো ফ্রেমওয়ার্কে কাস্টম ইভেন্ট তৈরি করে আপনি একটি নির্দিষ্ট ইভেন্টের জন্য ডেটা পাঠাতে এবং শোনাতে পারবেন, যা পরবর্তীতে নোটিফিকেশন বা অন্যান্য কার্যকলাপ ট্রিগার করবে। এটি একটি অত্যন্ত কার্যকরী পদ্ধতি, যেখানে একাধিক ইভেন্ট এবং নোটিফিকেশন প্রক্রিয়া ব্যবস্থাপনা করা যায়।